<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>upfile</title>
    <meta content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: #fff;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap {
            padding: 10px;
        }

        #topbar {
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            text-align: right;
        }


        .tox *:not(svg):not(rect) {
            box-sizing: inherit;
            color: inherit;
            cursor: inherit;
            direction: inherit;
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit;
            line-height: inherit;
            -webkit-tap-highlight-color: inherit;
            text-align: inherit;
            text-decoration: inherit;
            text-shadow: inherit;
            text-transform: inherit;
            vertical-align: inherit;
            white-space: inherit;
        }

        .tox *:not(svg):not(rect) {
            /* stylelint-disable-line no-duplicate-selectors */
            background: transparent;
            border: 0;
            float: none;
            height: auto;
            margin: 0;
            max-width: none;
            outline: 0;
            padding: 0;
            position: static;
            width: auto;
        }

        .tox .tox-form__group {
            box-sizing: border-box;
            margin-bottom: 4px;
        }

        .tox .tox-label, .tox .tox-toolbar-label {
            color: rgba(34, 47, 62, .7);
            display: block;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.3;
            padding: 0 8px 0 0;
            text-transform: none;
            white-space: nowrap;
        }

        .tox .tox-selectfield select, .tox .tox-textarea, .tox .tox-textfield, .tox .tox-toolbar-textfield {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #fff;
            border-color: #ccc;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            box-sizing: border-box;
            color: #222f3e;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            font-size: 16px;
            line-height: 24px;
            margin: 0;
            min-height: 34px;
            outline: 0;
            padding: 5px 4.75px;
            resize: none;
            width: 100%;
        }

        .tox .tox-dialog__body-content {
            box-sizing: border-box;
            display: flex;
            flex: 1;
            flex-direction: column;
            -ms-flex-preferred-size: auto;
            max-height: 650px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding: 16px 16px;
        }

        .tox .tox-dialog__body-content {
            box-sizing: border-box;
            display: flex;
            flex: 1;
            flex-direction: column;
            -ms-flex-preferred-size: auto;
            max-height: 650px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding: 16px 16px;
        }

        .tox .tox-dialog__body-content > * {
            margin-bottom: 0;
            margin-top: 16px;
        }

        .tox .tox-dialog__body-content > *:first-child {
            margin-top: 0;
        }

        .tox .tox-dialog__body-content > *:last-child {
            margin-bottom: 0;
        }

        .tox .tox-dialog__body-content > *:only-child {
            margin-bottom: 0;
            margin-top: 0;
        }

        .tox .tox-dialog__body-content a {
            color: #207ab7;
            cursor: pointer;
            text-decoration: none;
        }

        .tox .tox-dialog__body-content a:hover,
        .tox .tox-dialog__body-content a:focus {
            color: #185d8c;
            text-decoration: none;
        }

        .tox .tox-dialog__body-content a:active {
            color: #185d8c;
            text-decoration: none;
        }

        .tox .tox-dialog__body-content svg {
            fill: #222f3e;
        }

        .tox .tox-form__group--stretched {
            display: flex;
            flex: 1;
            flex-direction: column;
            -ms-flex-preferred-size: auto;
        }

        .tox .tox-form__group {
            box-sizing: border-box;
            margin-bottom: 4px;
        }

        .tox .tox-dropzone-container {
            display: flex;
            flex: 1;
        }

        element.style {
        }

        .tox .tox-dropzone {
            cursor: pointer;
            align-items: center;
            background: #fff;
            border: 2px dashed #ccc;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: center;
            min-height: 100px;
            padding: 10px;
        }

        .tox .tox-button {
            background-color: #207ab7;
            background-image: none;
            background-position: 0 0;
            background-repeat: repeat;
            border-color: #207ab7;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: normal;
            line-height: 24px;
            margin: 0;
            outline: 0;
            padding: 4px 16px;
            text-align: center;
            text-decoration: none;
            text-transform: capitalize;
            white-space: nowrap;
        }

        .tox .tox-button[disabled] {
            background-color: #207ab7;
            background-image: none;
            border-color: #207ab7;
            box-shadow: none;
            color: rgba(255, 255, 255, 0.5);
            cursor: not-allowed;
        }

        .tox .tox-button:focus:not(:disabled) {
            background-color: #1c6ca1;
            background-image: none;
            border-color: #1c6ca1;
            box-shadow: none;
            color: #fff;
        }

        .tox .tox-button:hover:not(:disabled) {
            background-color: #1c6ca1;
            background-image: none;
            border-color: #1c6ca1;
            box-shadow: none;
            color: #fff;
        }

        .tox .tox-button:active:not(:disabled) {
            background-color: #185d8c;
            background-image: none;
            border-color: #185d8c;
            box-shadow: none;
            color: #fff;
        }

        .tox .tox-button--secondary {
            background-color: #f0f0f0;
            background-image: none;
            background-position: 0 0;
            background-repeat: repeat;
            border-color: #f0f0f0;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            color: #222f3e;
            outline: 0;
            padding: 4px 16px;
            text-decoration: none;
            text-transform: capitalize;
        }

        .tox .tox-button--secondary[disabled] {
            background-color: #f0f0f0;
            background-image: none;
            border-color: #f0f0f0;
            box-shadow: none;
            cursor: pointer;
            color: rgba(34, 47, 62, 0.5);
        }

        .tox .tox-button--secondary:focus:not(:disabled) {
            background-color: #e3e3e3;
            background-image: none;
            border-color: #e3e3e3;
            box-shadow: none;
            color: #222f3e;
        }

        .tox .tox-button--secondary:hover:not(:disabled) {
            background-color: #e3e3e3;
            background-image: none;
            border-color: #e3e3e3;
            box-shadow: none;
            color: #222f3e;
        }

        .tox .tox-button--secondary:active:not(:disabled) {
            background-color: #d6d6d6;
            background-image: none;
            border-color: #d6d6d6;
            box-shadow: none;
            color: #222f3e;
        }
    </style>

</head>
<body>
<div id="wrap">
    <!-- <div id="topbar"><button class="addfile primary">+ 添加文件</button> -->
    <!-- <button class="upall primary">全部上传</button>
    <button class="removeall">清空列表</button></div> -->
    <ul class="tox" id="file_list">
        <div aria-labelledby="aria_5965197812761603939544315" class="tox-dialog__body-content" role="tabpanel"
             style="height: 336px; flex-basis: 210px;">
            <div class="tox-form">
                <div class="tox-form__group">
                    <label class="tox-label" for="form-field_8471486645261603941857554">链接</label>
                    <div class="tox-form__controls-h-stack">
                        <div class="tox-control-wrap">
                            <input aria-autocomplete="list" aria-errormessage="aria-invalid_348682591591603941621447"
                                   aria-expanded="false" aria-haspopup="true" class="tox-textfield"
                                   data-alloy-tabstop="true" id="upFileUrlID" role="combobox" tabindex="-1" type="url">
                        </div>
                    </div>
                </div>
                <div class="tox-form__group">
                    <label class="tox-label" for="form-field_2497330145271603941857555">显示文字</label>
                    <input class="tox-textfield" data-alloy-tabstop="true" id="upFileTextID" tabindex="-1" type="text">
                </div>
                <div style="height: 10px;"></div>
                <div class="tox-form__group tox-form__group--stretched">
                    <div class="tox-dropzone-container">
                        <div class="tox-dropzone">
                            <p style="margin: 10px auto;color:rgba(34,47,62,.7)">拖放一张文件至此</p>
                            <button class="tox-button tox-button--secondary" data-alloy-tabstop="true" id="upfileID"
                                    onclick="getFile()" style="position: relative; min-height: 30px; overflow: visible;"
                                    tabindex="-1" type="button">浏览文件<input accept="image/*" style="display: none;"
                                                                           type="file"></button>
                            <input id="upfileNameID"
                                   style="margin: 5px auto;font-size: 12px; color:rgba(34,47,62,.7); width: 300px; text-align: center;"
                                   type="text" value="">
                        </div>
                    </div>
                </div>
            </div>
            <button class="tox-button" onclick="sendUpFile()"
                    style="width: 80%;position: absolute;bottom:10px;left: 55px; margin: 0 auto;letter-spacing: 2px; display: block;"
                    title="上传文件" type="button">
                <svg height="24" style="margin-top:5px;" width="24">
                    <path d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4v-2h4V8H5v10h4v2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14zm-8 9.4l-2.3 2.3a1 1 0 1 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L13 13.4V20a1 1 0 0 1-2 0v-6.6z"
                          fill="#fff" fill-rule="nonzero"></path>
                </svg>
                <span style="top:-6px; position: relative; margin-left:5px;">开始上传</span></button>
        </div>
    </ul>
</div>

<script>
    var editor = parent.tinymce.activeEditor;
    var upfile = parent.upfile;
    var upload_handler = upfile.file_callback;
    var upfileData = ""
    var upfileUrl = null

    function addFile(file) {
        upfileData = file[0];
        document.getElementById('upfileNameID').value = file[0].name;
    }

    let inputUrl = document.getElementById('upFileUrlID');
    let inputText = document.getElementById('upFileTextID');

    function sendUpFile() {
        upload_handler(upfileData, function (url, _obj) {
            inputUrl.value = url;
            inputText.value ? '' : inputText.value = url;
            _obj && _obj.text ? inputText.value = _obj.text : '';
            upfile.res.url = upfileUrl = url;
            upfile.res.text = inputText.value;

        })
    }

    inputUrl.oninput = function () {
        upfile.res.url = inputUrl.value;
        upfileUrl === null ? inputText.value = inputUrl.value : ''
    }
    inputText.oninput = function () {
        upfile.res.text = inputText.value;
        upfileUrl = "123";
    }
    //拖拽添加
    document.addEventListener('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });
    document.addEventListener('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        if (!e.dataTransfer.files) {
            return false;
        }
        var dropfiles = e.dataTransfer.files;
        if (!(dropfiles.length > 0)) {
            return false;
        }
        addFile(dropfiles);
    });

    var global$1 = upfile.tinymce.util.Tools.resolve('tinymce.util.Promise');
    var global$2 = upfile.tinymce.util.Tools.resolve('tinymce.Env');
    var global$3 = upfile.tinymce.util.Tools.resolve('tinymce.util.Delay');
    var pickFile = function (a) {
        return new global$1(function (e) {
            var c = document.createElement("input");
            c.type = "file";
            c.style.position = "fixed";
            c.style.left = "0";
            c.style.top = "0";
            c.style.opacity = "0.001";
            document.body.appendChild(c);
            var b = function (f) {
                e(Array.prototype.slice.call(f.target.files))
            };
            c.addEventListener("change", b);
            var d = function (g) {
                var f = function () {
                    e([]);
                    c.parentNode.removeChild(c)
                };
                if (global$2.os.isAndroid() && g.type !== "remove") {
                    global$3.setEditorTimeout(a, f, 0)
                } else {
                    f()
                }
                a.off("focusin remove", d)
            };
            a.on("focusin remove", d);
            c.click()
        })
    };

    function getFile() {

        pickFile(editor).then(function (files) {
            addFile(files);
        })
    }
</script>
</body>
</html>
